<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../css/index%20(1).css" />
		<link rel="stylesheet" type="text/css" href="../css/detail.css" />
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/vant.js" type="text/javascript" charset="utf-8"></script>
		<script src="html5plus://ready"></script>
		<script src="../js/ajax.js" type="text/javascript" charset="utf-8"></script>
		<title></title>
		<script type="text/javascript">
			document.addEventListener('plusready', function() {
				//console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。"

			});
		</script>
	</head>
	<body>
		<div id="detail">
			<header style="background-color:grey;height: 30px;">
				<van-icon name="arrow-left" size="20px" @click="b_return" />返回
			</header>
			<!-- <van-swipe :autoplay="3000">
				<van-swipe-item v-for="img in detail.SwipeImages">
					<img :src="img.src" width="100%" onerror="this.src='../img/detail_default.jpg'" />
				</van-swipe-item>
			</van-swipe> -->
			<van-swipe :autoplay="3000" indicator-color="white">
				<van-swipe-item><img class="swipe_img" src="../img/photo1.jpg" alt="" /></van-swipe-item>
				<van-swipe-item><img class="swipe_img" src="../img/photo2.jpg" alt="" /></van-swipe-item>
			</van-swipe>

			<van-panel>
				<div slot="header">
					<h3>
						<span>{{detail.Name}}</span>
						<br />
						<span style="color: red;"><span>￥</span>{{detail.MarketPrice}}</span>
						</h2>
				</div>
				<div slot="footer">
					<van-row>
						<van-col span="8">运费：免运费</van-col>
						<van-col span="8" offest="2">销量：<span>{{detail.SaleCount}}</span> </van-col>
					</van-row>
				</div>
			</van-panel>
			<van-cell style="background-color: #F3F3F6;">
				<van-col class="vol-class" span="8">☞正品保证</van-col>
				<van-col class="vol-class" span="8">☞极速退款</van-col>
				<van-col class="vol-class" span="8">☞两天内发货</van-col>
			</van-cell>
			<van-panel title="商品详情" desc="描述信息">
				<div class="detail_img">
					<img src="../img/photo4.jpg" alt="" />
					<br />
					<img src="../img/photo5.jpg" alt="" />
					<br />
					<img src="../img/photo6.jpg" alt="" />
					<br />
					<img src="../img/photo7.jpg" alt="" />
				</div>
			</van-panel>

			<van-goods-action>
				<van-goods-action-mini-btn icon="like-o" text="收藏" @click="addLike"></van-goods-action-mini-btn>
				<van-goods-action-big-btn text="加入购物车" info="0" @click="addCart"></van-goods-action-big-btn>
				<van-goods-action-big-btn primary text="立即购买" @click="buy"></van-goods-action-big-btn>
			</van-goods-action>
		</div>
		<script>
			var vm_d = new Vue({
				el: "#detail",
				data: {
					detail: "",
					isCollected: false,
					phone: "",
					addShopcartCount: 0,
					pid: 0,
					// 					proDe: ["../img/temp/dt_1.png", "../img/temp/dt_2.png", "../img/temp/dt_3.png", "../img/temp/dt_4.png",
					// 						"../img/temp/dt_5.png"
					// 					]
				},
				mounted: function() {
					var gid = plus.webview.currentWebview().Id;
					ajax({
						url: "http://dsapi.ysd3g.com/API/GoodsDetail",
						dataType: "jsonp",
						data: {
							gId: gid
						},
						success: function(res) {
							if (res.Detail != null) {
								vm_d.detail = res.Detail;
								vm.pid = res.Detail.Id;
							} 
							else {
								vm_d.$toast.fail({
									message: "沒有产品详情",
									duration: 5000
								});
							}
						}
					});
					var spg = localStorage.getItem(JSON.parse(plus.storage.getItem("userData")).Phone); //购物车内的商品
					if (spg != null) {
						var shopcartGoods = JSON.parse(localStorage.getItem(JSON.parse(plus.storage.getItem("userData")).Phone)); //购物车里面的商品
						for (var i = 0; i < shopcartGoods.length; i++) { //遍历购物车
							if (shopcartGoods[i].goodsId == gid) { //如果购物车里面有此商品
								this.addShopcartCount = shopcartGoods[i].buyCount;
							}
						}
					}
				},
				methods: {
					b_return: function() {
						var w = plus.webview.currentWebview();
						w.close();
					},
					addLike: function() {

					},
					addCart: function() {
						if (key == null) {
							plus.webview.create("main/login.html", "login").show();
						} else {
							vm_d.$toast.success("加入购物车");
							vm_d.phone = JSON.parse(plus.storage.getItem("userData")).Phone;
							var goodsArr = [{
								goodsId: vm_d.detail.Id,
								buyCount: 1
							}];
							var goodsObj = {
								goodsId: vm_d.detail.Id,
								buyCount: 1
							};
							var newArr;
							if (localStorage.getItem(vm_d.phone) == null) { //如果购物车里面没有任何东西
								localStorage.removeItem(vm_d.phone);
								localStorage.setItem(vm_d.phone, JSON.stringify(goodsArr));
								vm_d.addShopcartCount = 1; //显示此商品在购物车内的数量
							} else { //购物车里有东西
								newArr = JSON.parse(localStorage.getItem(vm_d.phone)); //购物车里面的商品
								for (var i = 0; i < newArr.length; i++) { //遍历购物车
									if (newArr[i].goodsId == vm_d.detail.Id) { //如果购物车里面有此商品
										newArr[i].buyCount += 1; //商品数量+1
										localStorage.removeItem(vm_d.phone);
										localStorage.setItem(vm_d.phone, JSON.stringify(newArr)); //
										vm_d.addShopcartCount = newArr[i].buyCount; //显示此商品在购物车内的数量
										return;
									}
								}
								//购物车里没有此商品
								newArr.push(goodsObj); //向购物车内添加商品
								localStorage.removeItem(vm_d.phone);
								localStorage.setItem(vm_d.phone, JSON.stringify(newArr)); //
								vm_d.addShopcartCount = 1; //显示此商品在购物车内的数量
							}
						}
					},
					buy: function() {
						if (key == null) {
							plus.webview.create("Self/login.html", "login").show();
						} else {
							plus.webview.create("../details/pay.html", "pay", {}, {
								pid: this.pid,
								isShow: true,
								address: true
							}).show();
						}
					}
				}
			})
		</script>
	</body>
</html>
